<template>
  <div class="OrderInfo">
    <div class="Header">
      <van-nav-bar
        title="订 单 详 情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="imageVancard">
      <van-card
        v-for="info in item.orderLines"
        :key="info.id"
        :num="info.number"
        :price="info.product.price + '.00'"
        :desc="info.product.description"
        :title="info.product.name"
        :thumb="info.product.photo"
      >
      </van-card>
    </div>
    <div class="blank">
      <span
        style="
          position: absolute;
          display: block;
          font-size: 16px;
          right: 0;
          bottom: 0;
        "
        >总计：<span style="color: red">¥{{ item.total }}</span></span
      >
    </div>
    <div class="withoutImageVancard">
      <van-card
        :desc="
          '联系方式：' +
          item.customer.username +
          '(' +
          item.customer.telephone +
          ')'
        "
        :title="
          '服务地址：' +
          item.address.province +
          item.address.city +
          item.address.area +
          item.address.address
        "
      >
        <template #tags>
          <van-tag plain style="font-size: 12px"
            >下单时间：{{ timestampToTime(item.orderTime) }}</van-tag
          ><br />
          <van-tag plain v-if="item.serviceTime != null"
            >服务时间：{{ timestampToTime(item.serviceTime) }}</van-tag
          >
          <van-tag plain v-else
            >服务时间：暂无&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</van-tag
          >
        </template>
        <template #footer>
          <van-tag plain>{{ item.status }}</van-tag>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: this.$route.query.item,
      total: 0,
    };
  },
  methods: {
    timestampToTime(time) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new Date(time);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
    //console.log(this.$route.query.item);
    console.log(this.item);
  },
};
</script>

<style scoped>
.van-nav-bar {
  background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
}
.blank {
  height: 100px;
  position: relative;
}
</style>